﻿@page "/datagrid/column-resize"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates the DataGrid column resizing feature. Click and drag at the right corner of each column header to resize the column.</p> 
</SampleDescription>
<ActionDescription>
   <p>The DataGrid columns can be resized by clicking the right corner of column header and dragging it. To enable column resize behavior, set the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowResizing'>AllowResizing</a></code> property as true. You can also prevent the resize of the particular column by setting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing'>AllowResizing</a></code> property as false in the columns definition. And, by double clicking at the right corner of column header, the respective column width will get auto adjusted by the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/'>AutoFitColumns</a></code> method.</p>
   <p>In this demo, AllowResizing feature has been enabled by setting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridModel%601~AllowResizing.html'>AllowResizing</a></code> property to true and <b>Order ID</b> column can be resized between the range of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_MinWidth'>MinWidth (120px)</a></code> and <code><a target='_blank' class='code' href= 'https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_MaxWidth'>MaxWidth (300px)</a>.</code> Also, column resizing has been disabled for the <b>Shipped Date</b> column.</p>
    <p>More information on the custom data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/custom-binding/'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid DataSource="@GridData" Height="400" AllowResizing="true">
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  MinWidth="120" Width="200" MaxWidth="300"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" MinWidth="8" Width="200"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  MinWidth="8" Width="200"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  MinWidth="8" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipName) HeaderText="Ship Name" MinWidth="8" Width="300"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShippedDate) HeaderText="Shipped Date" AllowResizing="false" width="200" Format="d" TextAlign="TextAlign.Right"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" MinWidth="8" Width="200"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="Ship City" MinWidth="8" Width="200"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
